/*
 * @Author: jjjjwei 1506865174@qq.com
 * @Date: 2022-08-10 17:01:03
 * @LastEditors: jjjjwei 1506865174@qq.com
 * @LastEditTime: 2022-08-10 17:01:08
 * @FilePath: \react\react-routeredux\src\component\projectmanage\Xiangmuguanli.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import React, { useEffect, useState, useLayoutEffect } from "react";
import { AntDesignOutlined, UserOutlined } from "@ant-design/icons";
import {
  Avatar,
  Tooltip,
  Image,
  Pagination,
  Menu,
  Button,
  Input,
  Form,
  Switch,
  Select,
  Table,
  Modal,
} from "antd";
import "./../../assets/less/projectmanage.less";
import axios from "./../../utils/axios";
import api from "./../../api";

const { Option } = Select;
const columns = [
  {
    title: "Full Name",
    align: "center",
    dataIndex: "name",
    key: "name",
    // fixed: "left",
  },
  {
    title: "Age",
    align: "center",
    dataIndex: "age",
    key: "age",
    // fixed: "left",
  },
  {
    title: "Column 1",
    dataIndex: "address",
    align: "center",
    key: "1",
  },
  {
    title: "Column 2",
    align: "center",
    dataIndex: "address",
    key: "2",
  },
  {
    title: "Column 3",
    align: "center",
    dataIndex: "address",
    key: "3",
  },
  {
    title: "Column 4",
    align: "center",
    dataIndex: "address",
    key: "4",
  },
  {
    title: "Column 5",
    align: "center",
    dataIndex: "address",
    key: "5",
  },
  {
    title: "Column 6",
    align: "center",
    dataIndex: "address",
    key: "6",
  },
  {
    title: "Column 7",
    align: "center",
    dataIndex: "address",
    key: "7",
  },
  {
    title: "Column 8",
    align: "center",
    dataIndex: "address",
    key: "8",
  },
  {
    title: "操作",
    key: "operation",
    fixed: "right",
    align: "center",
    render: () => {
      <a href="###">移除</a>;
      <a href="###">设为负责人</a>;
    },
  },
];
const data = [
  {
    key: "1",
    name: "John Brown",
    age: 32,
    address: "New York Park",
  },
  {
    key: "2",
    name: "Jim Green",
    age: 40,
    address: "London Park",
  },
];
export default function Xiangmuguanli() {
  useLayoutEffect(() => {
    // axios({
    //   method: "POST",
    //   url: "",
    //   data: {},
    // })
    //   .then((response) => {
    //     console.log(response);
    //   })
    //   .catch((error) => {
    //     console.log(error);
    //   });
  }, []);
  const [current, setCurrent] = useState("mail");
  const [jxz, setjxz] = useState(1);
  const [ywc, setywc] = useState(1);
  const [addyuang, setaddyuang] = useState(false);
  const [addjihuas, setaddjihuas] = useState(false);
  const [iswc, setiswc] = useState(true);
  const [addxiangmus, setaddxiangmus] = useState(true);
  const [confirmLoading, setConfirmLoading] = useState(false);
  const [modalText, setModalText] = useState("Content of the modal");
  const handleOk = (e) => {
    console.log(e);
    setModalText("The modal will be closed after one seconds");
    setConfirmLoading(true);
    setTimeout(() => {
      setaddyuang(false);
      setaddjihuas(false);
      setConfirmLoading(false);
    }, 1000);
  };

  const handleCancel = () => {
    console.log("Clicked cancel button");
    setaddyuang(false);
    setaddjihuas(false);
  };
  const onClick = (e) => {
    if (e.key === "mail") {
      setiswc(true);
    } else if (e.key === "SubMenu") {
      setiswc(false);
    }
    console.log("click ", e.key);
    setCurrent(e.key);
  };
  const addxiangmu = () => {
    if (addxiangmus) {
      setaddxiangmus(false);
    } else {
      setaddxiangmus(true);
    }
  };
  const addyuangong = () => {
    setaddyuang(true);
  }; // addyuangong to the list of addxiangmus functions
  const addjihua = () => {
    setaddjihuas(true);
  }; // addjihua to the list of addxiangmus functions
  const items = [
    {
      label: "进行中(" + jxz + ")",
      key: "mail",
    },

    {
      label: "已完成(" + ywc + ")",
      key: "SubMenu",
    },
  ];
  return (
    <>
      {addxiangmus ? (
        <div className="xiangmus">
          <Menu onClick={onClick} selectedKeys={[current]} mode="horizontal" items={items}></Menu>
          <Button type="primary" className="xiangmu-add" onClick={addxiangmu}>
            add
          </Button>
          {iswc ? (
            <>
              <div className="container-any">
                <div className="containerimage">
                  <Image
                    width={200}
                    src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
                  />
                  <p style={{ fontWeight: "bold" }}>苏州地铁项目</p>
                  <p style={{ color: "#999999" }}>江苏省 苏州市 姑苏区</p>
                  <Avatar.Group
                    maxCount={5}
                    maxPopoverTrigger="click"
                    maxStyle={{
                      color: "#f56a00",
                      backgroundColor: "#fde3cf",
                      cursor: "pointer",
                    }}
                  >
                    <Avatar src="https://joeschmoe.io/api/v1/random" />
                    <Avatar
                      title="Ant User"
                      style={{
                        backgroundColor: "#1890ff",
                      }}
                    />
                    <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
                    <Tooltip title="Ant User" placement="top">
                      <Avatar
                        style={{
                          backgroundColor: "#87d068",
                        }}
                      />
                    </Tooltip>
                  </Avatar.Group>
                </div>
                <div className="containerimage">
                  <Image
                    width={200}
                    src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
                  />
                  <p style={{ fontWeight: "bold" }}>苏州地铁项目</p>
                  <p style={{ color: "#999999" }}>江苏省 苏州市 姑苏区</p>
                  <Avatar.Group
                    maxCount={5}
                    maxPopoverTrigger="click"
                    maxStyle={{
                      color: "#f56a00",
                      backgroundColor: "#fde3cf",
                      cursor: "pointer",
                    }}
                  >
                    <Avatar src="https://joeschmoe.io/api/v1/random" />
                    <Avatar
                      title="Ant User"
                      style={{
                        backgroundColor: "#1890ff",
                      }}
                      icon={<AntDesignOutlined />}
                    />
                    <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
                    <Tooltip title="Ant User" placement="top">
                      <Avatar
                        style={{
                          backgroundColor: "#87d068",
                        }}
                        icon={<UserOutlined />}
                      />
                    </Tooltip>
                  </Avatar.Group>
                </div>
                <div className="containerimage">
                  <Image
                    width={200}
                    src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
                  />
                  <p style={{ fontWeight: "bold" }}>苏州地铁项目</p>
                  <p style={{ color: "#999999" }}>江苏省 苏州市 姑苏区</p>
                  <Avatar.Group
                    maxCount={5}
                    maxPopoverTrigger="click"
                    maxStyle={{
                      color: "#f56a00",
                      backgroundColor: "#fde3cf",
                      cursor: "pointer",
                    }}
                  >
                    <Avatar src="https://joeschmoe.io/api/v1/random" />
                    <Avatar
                      title="Ant User"
                      style={{
                        backgroundColor: "#1890ff",
                      }}
                      icon={<AntDesignOutlined />}
                    />
                    <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
                    <Tooltip title="Ant User" placement="top">
                      <Avatar
                        style={{
                          backgroundColor: "#87d068",
                        }}
                        icon={<UserOutlined />}
                      />
                    </Tooltip>
                  </Avatar.Group>
                </div>
                <div className="containerimage">
                  <Image
                    width={200}
                    src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
                  />
                  <p style={{ fontWeight: "bold" }}>苏州地铁项目</p>
                  <p style={{ color: "#999999" }}>江苏省 苏州市 姑苏区</p>
                  <Avatar.Group
                    maxCount={5}
                    maxPopoverTrigger="click"
                    maxStyle={{
                      color: "#f56a00",
                      backgroundColor: "#fde3cf",
                      cursor: "pointer",
                    }}
                  >
                    <Avatar src="https://joeschmoe.io/api/v1/random" />
                    <Avatar
                      title="Ant User"
                      style={{
                        backgroundColor: "#1890ff",
                      }}
                      icon={<AntDesignOutlined />}
                    />
                    <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
                    <Tooltip title="Ant User" placement="top">
                      <Avatar
                        style={{
                          backgroundColor: "#87d068",
                        }}
                        icon={<UserOutlined />}
                      />
                    </Tooltip>
                  </Avatar.Group>
                </div>
                <div className="containerimage">
                  <Image
                    width={200}
                    src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
                  />
                  <p style={{ fontWeight: "bold" }}>苏州地铁项目</p>
                  <p style={{ color: "#999999" }}>江苏省 苏州市 姑苏区</p>
                  <Avatar.Group
                    maxCount={5}
                    maxPopoverTrigger="click"
                    maxStyle={{
                      color: "#f56a00",
                      backgroundColor: "#fde3cf",
                      cursor: "pointer",
                    }}
                  >
                    <Avatar src="https://joeschmoe.io/api/v1/random" />
                    <Avatar
                      title="Ant User"
                      style={{
                        backgroundColor: "#1890ff",
                      }}
                      icon={<AntDesignOutlined />}
                    />
                    <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
                    <Tooltip title="Ant User" placement="top">
                      <Avatar
                        style={{
                          backgroundColor: "#87d068",
                        }}
                        icon={<UserOutlined />}
                      />
                    </Tooltip>
                  </Avatar.Group>
                </div>
                <div className="containerimage">
                  <Image
                    width={200}
                    src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
                  />
                  <p style={{ fontWeight: "bold" }}>苏州地铁项目</p>
                  <p style={{ color: "#999999" }}>江苏省 苏州市 姑苏区</p>
                  <Avatar.Group
                    maxCount={5}
                    maxPopoverTrigger="click"
                    maxStyle={{
                      color: "#f56a00",
                      backgroundColor: "#fde3cf",
                      cursor: "pointer",
                    }}
                  >
                    <Avatar src="https://joeschmoe.io/api/v1/random" />
                    <Avatar
                      title="Ant User"
                      style={{
                        backgroundColor: "#1890ff",
                      }}
                      icon={<AntDesignOutlined />}
                    />
                    <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
                    <Tooltip title="Ant User" placement="top">
                      <Avatar
                        style={{
                          backgroundColor: "#87d068",
                        }}
                        icon={<UserOutlined />}
                      />
                    </Tooltip>
                  </Avatar.Group>
                </div>
                <div className="containerimage">
                  <Image
                    width={200}
                    src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
                  />
                  <p style={{ fontWeight: "bold" }}>苏州地铁项目</p>
                  <p style={{ color: "#999999" }}>江苏省 苏州市 姑苏区</p>
                  <Avatar.Group
                    maxCount={5}
                    maxPopoverTrigger="click"
                    maxStyle={{
                      color: "#f56a00",
                      backgroundColor: "#fde3cf",
                      cursor: "pointer",
                    }}
                  >
                    <Avatar src="https://joeschmoe.io/api/v1/random" />
                    <Avatar
                      title="Ant User"
                      style={{
                        backgroundColor: "#1890ff",
                      }}
                      icon={<AntDesignOutlined />}
                    />
                    <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
                    <Tooltip title="Ant User" placement="top">
                      <Avatar
                        style={{
                          backgroundColor: "#87d068",
                        }}
                        icon={<UserOutlined />}
                      />
                    </Tooltip>
                  </Avatar.Group>
                </div>
              </div>
              <div>
                <Pagination
                  total={85}
                  showSizeChanger
                  showQuickJumper
                  showTotal={(total) => `Total ${total} items`}
                />
              </div>
            </>
          ) : (
            <></>
          )}
        </div>
      ) : (
        <>
          <Form>
            <Form.Item
              name="username"
              label="付款金额"
              rules={[
                {
                  required: true,
                  message: "Username is required!",
                },
              ]}
            >
              <Input />
            </Form.Item>
            <Form.Item
              label="是否紧急"
              labelCol={{
                span: 9,
                offset: 30,
              }}
            >
              <Select placeholder="请选择">
                <Option value="china">China</Option>
                <Option value="usa">U.S.A</Option>
              </Select>
            </Form.Item>
            <Form.Item
              name="username"
              label="付款金额"
              rules={[
                {
                  required: true,
                  message: "Username is required!",
                },
              ]}
            >
              <Input />
            </Form.Item>
            <Form.Item
              label="是否紧急"
              labelCol={{
                span: 9,
                offset: 30,
              }}
            >
              <Select placeholder="请选择">
                <Option value="china">China</Option>
                <Option value="usa">U.S.A</Option>
              </Select>
            </Form.Item>
            <Form.Item
              label="是否紧急"
              labelCol={{
                span: 9,
                offset: 30,
              }}
            >
              <Select placeholder="请选择">
                <Option value="china">China</Option>
                <Option value="usa">U.S.A</Option>
              </Select>
            </Form.Item>

            {/* 开关 */}
            <Form.Item name="gender" label="是否紧急" rules={[{ required: true }]}>
              <Switch checkedChildren="开启" unCheckedChildren="关闭" defaultChecked />
            </Form.Item>
          </Form>
          <div>
            <p>员工管理</p>
            <Button type="primary" style={{ display: "block" }} onClick={addyuangong}>
              新增成员
            </Button>
            <Table
              columns={columns}
              dataSource={data}
              ellipsis={true}
              filterMultiple={true}
              pagination={false}
            ></Table>
            <Modal
              destroyOnClose={true}
              cancelText="取消"
              okText="确定"
              title={modalText}
              visible={addyuang}
              onOk={handleOk}
              confirmLoading={confirmLoading}
              onCancel={handleCancel}
            >
              <div>
                <Form>
                  <Form.Item
                    label="Username"
                    name="username"
                    rules={[
                      {
                        required: true,
                        message: "Please input your username!",
                      },
                    ]}
                  >
                    <Input
                      placeholder="Enter your name"
                      type="text"
                      onChange={(e) => {
                        console.log(e.target.value);
                      }}
                      onCancel={(e) => {}}
                    />
                  </Form.Item>
                  <Form.Item
                    label="是否紧急"
                    labelCol={{
                      span: 9,
                      offset: 30,
                    }}
                  >
                    <Select placeholder="请选择">
                      <Option value="china">China</Option>
                      <Option value="usa">U.S.A</Option>
                    </Select>
                  </Form.Item>
                </Form>
                <Button>查询</Button>
                <Button>重置</Button>
                <Table></Table>
              </div>
            </Modal>
          </div>
          <div>
            <p>工作计划</p>
            <Button type="primary" style={{ display: "block" }} onClick={addjihua}>
              创建计划
            </Button>
            <Table
              columns={columns}
              dataSource={data}
              ellipsis={true}
              filterMultiple={true}
              pagination={false}
            ></Table>
            <Modal
              destroyOnClose={true}
              cancelText="取消"
              okText="确定"
              title={modalText}
              visible={addjihuas}
              onOk={handleOk}
              confirmLoading={confirmLoading}
              onCancel={handleCancel}
            >
              <div>
                <Form>
                  <Form.Item
                    label="Username"
                    name="username"
                    rules={[
                      {
                        required: true,
                        message: "Please input your username!",
                      },
                    ]}
                  >
                    <Input
                      placeholder="Enter your name"
                      type="text"
                      onChange={(e) => {
                        console.log(e.target.value);
                      }}
                      onCancel={(e) => {}}
                    />
                  </Form.Item>
                </Form>
              </div>
            </Modal>
          </div>
          <Button type="primary" onClick={addxiangmu}>
            保存
          </Button>
          <Button type="primary" onClick={addxiangmu}>
            取消
          </Button>
        </>
      )}
    </>
  );
}
